<template>
  <div class="record">
    <header-bar title="工作纪实">
      <button  slot="right" style="margin: 0 0 0 auto;border: none;background-color: transparent;">
        <router-link :to="{name: 'leaveDetails'}">
          <icon name="add" :scale="3" style="fill: #fff;"></icon>
        </router-link>
      </button>
    </header-bar>
    <section class="main">
      <scroll :data="scrollData" style="width: 100%;height: 100%;">
        <ul class="document-list">
            <router-link :to="{name: 'searchRecord'}"
              v-for="(document, index) in documents"
              :key="index"
              >
              <li class="document-item">
                <div class="item-line"></div>
                <div class="title-wrapper">
                  <h3 class="title">{{document.title}}</h3>
                  <div class="desc">
                    <div class="datetime">{{document.datetime}}</div>
                  </div>
                </div>
              </li>
            </router-link>
        </ul>  
      </scroll>
    </section>
    <transition name="slide">
      <router-view class="child-view">
      </router-view>
    </transition> 
  </div>
  
</template>

<script>
  import {Swiper, SwiperItem} from 'vux'
  import HeaderBar from '@/components/HeaderBar'
  import Scroll from '@/components/Scroll'
  import {documents} from '@/data/documents'

  export default{
    data(){
      return {
        scrollData: [1],
        documents
      }
    },
    components: {
      HeaderBar,
      Scroll,
      Swiper,
      SwiperItem
    },
    methods: {
      addrecord(){
      this.$router.push({
            name: 'addRecord'
          })
      }
    },
    computed: {
      swiperHeight(){
        const vh = window.document.body.offsetHeight
        console.log(vh)
        return `${vh - 98}px`
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';
  @import '~@/styles/mixin.less';

  .record{
    .main{
      top: @height-header-bar;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #e6e6e6;
      position: absolute;
      .scroll{
        width: 100%;
        height: 100%;
      }

      .document-list{
        .document-item{
          margin-top: 0.16rem;
          display: flex;
          background-color: #fff;
          height: 1.6rem;
          padding: 0.3rem 0.34rem;
          .item-line{
            width: 10px;
            background-color: @color-theme-blue-medium;
          }
          .title-wrapper{
            width: 7.2rem;
            padding-left: 0.26rem;
            .title{
              color: #2d2d2d;
              font-size: 0.34rem;
              font-weight: normal;
            }
            .desc{
              display: flex;
              justify-content: space-between;
              font-size: 0.28rem;
              color: #989898;
            }
          }
          .border-1px(#d9d9d9)
        }  
      }
      .icon-wrapper{
        position: fixed;
        left: 5.8rem;
        bottom: 0.2rem;
      }
     
    }
  .child-view{
      position: fixed;
      top:0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      }
      .slide-enter-active, .slide-leave-active{
        transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
      }
      .slide-enter, .slide-leave-active{
        transform: translate3d(100%, 0, 0);
      }    
  }
</style>